<template>
	<view class="addressBook">
		<view class="topSearch">
			<u-search placeholder="请输入" v-model="keyword" :animation="false" :showAction="false" @blur="onBlurSearch" @clear="onClearBtnOK"></u-search>
		</view>

		<u-index-list v-if="itemArr.length > 0" :index-list="indexList">
			<template v-for="(item, index) in itemArr">
				<!-- #ifdef APP-NVUE -->
				<u-index-anchor :text="indexList[index]"></u-index-anchor>
				<!-- #endif -->
				<u-index-item>
					<!-- #ifndef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<view @click="phoneBtnOK(cell)" class="list-cell" v-for="(cell, index) in item">
						{{ cell.name }}
					</view>
				</u-index-item>
			</template>
		</u-index-list>
		<uni-load-more v-else status="暂无更多" />
		<u-popup :show="phoneShow" mode="bottom" @close="close" @open="open">
			<view class="phoneShow_Style">
				<u-icon name="phone"></u-icon>
				<u--text @click="phone" mode="phone" :text="phoneText.name"></u--text>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getPhone } from '@/api/mappages/phone/phone.js';
import convert from './convert.js';
export default {
	data() {
		return {
			indexListTow: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			indexList: [],
			itemArr: [],
			keyword: '',
			phoneShow: false,
			phoneText: ''
		};
	},
	onLoad() {
		this.isPhone();
	},
	methods: {
		//输入框失去焦点事件
		onBlurSearch() {
			this.isPhone();
		},
		//输入框右边清空按钮
		onClearBtnOK() {
			this.isPhone();
		},
		//通讯录列表请求事件
		async isPhone() {
			let phone = await getPhone(this.keyword);
			console.log(phone.result.records, 'tonguxnl');
			this.indexList = [];
			const resultArr = this.indexListTow.map(() => []);

			phone.result.records.forEach((item) => {
				const firstLetter = convert.chineseToPinYinFirst(item.name);
				this.indexList.push(firstLetter.split('')[0]);
				const index = this.indexListTow.indexOf(firstLetter.split('')[0]);
				if (index !== -1) {
					resultArr[index].push({
						name: item.name,
						phone: item.phone
					});
				}
			});
			this.itemArr = resultArr.filter((r) => r.length !== 0);
		},
		//通讯录 单列点击事件
		phoneBtnOK(val) {
			(this.phoneText = val), (this.phoneShow = true);
			console.log(val, '22');
		},
		//弹出层 拨打电话时间
		phone() {
			uni.makePhoneCall({
				phoneNumber: this.phoneText.phone,
				success: () => {
					console.log('拨打电话成功');
				},
				fail: (err) => {
					console.error('拨打电话失败', err);
				}
			});
		},
		open() {
			// console.log('open');
		},
		close() {
			this.phoneShow = false;
			// console.log('close');
		}
	}
};
</script>

<style lang="scss">
.topSearch {
	margin-top: 10rpx;
	padding: 10rpx;
	background-color: #fff;
}

.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 24rpx;
	overflow: hidden;
	color: #323233;
	font-size: 14px;
	line-height: 24px;
	background-color: #fff;
}

.phoneShow_Style {
	padding: 30rpx;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.phoneShow_Style text {
	font-size: 30rpx;
	font-weight: 600;
	margin-left: 22rpx;
}
</style>
